<template>
    <div id="app">
        <login v-on:doLoginSuccessEvent="doLoginSuccess" v-if="loginShow"></login>
        <div class="web-content" style="overflow: hidden;" v-if="webShow">
            <!--頭部-->
            <homeHead id="homeHead" v-on:doLoginOutEvent="doLoginOut" :headerUserName="headerUserName"></homeHead>
            <!--中部-->
            <div id="middleDiv" :style="height" >
                <el-row :gutter="10" style="height: 100%;">
                    <!--左菜單-->
                    <el-col style="height: 100%;" :xs="4" :sm="4" :md="4" :lg="4">
                        <el-scrollbar  style="height: 100%;background-color: rgb(240, 246, 246);" >
                            <el-menu
                                    style="height: 100%;"
                                    default-active="0"
                                    class="el-menu-vertical-demo"
                                    :default-openeds="defaultOpeneds"
                                    background-color="#F0F6F6"
                                    text-color="#1DA028"
                                    active-text-color="red"
                                    :router="true">
                                <NavMenu ref="leftMenu" class="LeftMenu"  :showEnableOnly="showEnableOnly" :iconSize="'16px'" ></NavMenu>
                            </el-menu>
                        </el-scrollbar>
                    </el-col>
                    <!--右菜單-->
                    <el-col style="height: 100%;overflow-y: auto;"  :xs="20" :sm="20" :md="20" :lg="20">
                        <!--<el-scrollbar  style="height: 100%;" >-->
                            <div style="margin-top:5px;overflow: hidden;">
                                <router-view></router-view>
                            </div>
                        <!--</el-scrollbar>-->
                        <!--底部-->
                        <!--<el-footer id="footer" style="background-color: rosybrown;">-->
                            <!--頁腳-->
                        <!--</el-footer>-->
                    </el-col>
                </el-row>
            </div>

        </div>
    </div>
</template>

<script>
    import login from './views/system/login/login'
    import homeHead from './views/system/home/homeHead'
    import NavMenu from './views/system/home/NavMenu'

    export default {
        name: 'app',
        data() {
            return {
                height:{
                    height:'',
                },
                webShow: false,
                loginShow: true,
                defaultOpeneds: [],
                headerUserName: "用户名",
                showEnableOnly: true,
                initFlg:true
            }
        },
        created(){
            window.addEventListener('resize', this.setHeight);
            this.setHeight();
        },
        methods: {
            // 設置高度
            setHeight:function(){
                this.height.height = window.innerHeight - 68 +'px';
            },
            doLoginSuccess: function (data) {
                console.log('登录成功！');
                this.loginShow = false;
                this.webShow = true;
                this.headerUserName = data;

                // 如果ref是定位在有v-if、v-for、v-show中的DOM节点，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！
                // 因此需要使用全局api
                // 详细参考：https://www.jb51.net/article/131163.htm
                this.$nextTick(()=>{
                    // 获取用户菜单
                    this.$refs.leftMenu.loadMenus();
                })
            },
            doLoginOut: function () {
                console.log('登出！');
                // 删除redis中的用户缓存
                this.$axios.post(this.$serverUrl + '/loginOut').then((res) => {

                }).catch((res) => {
                    console.log(res)
                })
                this.webShow = false;
                this.loginShow = true;
                // 清除token
                this.$axios.defaults.headers.common['Authorization'] = "";
            }
        },
        components: {login, homeHead, NavMenu}
    }
</script>

<style>
    .el-scrollbar__wrap{overflow-x:hidden;}
</style>
